<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>SHOPPING-This is a Python works</title>
  <meta content="" name="description">
  <meta content="python,work" name="keywords">

  <!-- Favicons -->
  <link href="../static/img/notebook.svg" rel="icon">
  <link href="../static/img/notebook.svg" rel="apple-touch-icon">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="../static/vendor/aos/aos.css" rel="stylesheet">
  <link href="../static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="../static/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link href="../static/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="../static/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
  <link href="../static/vendor/remixicon/remixicon.css" rel="stylesheet">
  <link href="../static/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link href="../static/css/style.css" rel="stylesheet">

	        <!--商品列表样式表-->
<!--        <link rel="stylesheet" type="text/css" href="../css/index.css" />-->
        <!--cookie操作的js库-->
        <script src="../static/js/cookie.js" type="text/javascript" charset="utf-8"></script>

<!--	<link href="../static/css/goods_list.css" rel="stylesheet">-->
  <style>
    .icon-boxes {
  margin-top: 100px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
    .goods-img {
        width: 100%;
    }
    .goods-money {
        color: orangered;
        font-weight: bold;
    }
  </style>
</head>

<body>

  <!-- ======= Header ======= -->
  <header id="header" class="fixed-top">
    <div class="container d-flex align-items-center justify-content-between">

      <h1 class="logo"><a href="/">PythonWorks</a></h1>
      <!-- Uncomment below if you prefer to use an image logo -->
      <!-- <a href="index.html" class="logo"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>-->

      <nav id="navbar" class="navbar">
        <ul>
          <li><a class="nav-link scrollto active" href="/">Home</a></li>
          <li><a class="nav-link scrollto" href="#about">About</a></li>
          <li><a class="nav-link scrollto" href="#services">Services</a></li>
          <li class="dropdown"><a href="#"><span>项目应用</span> <i class="bi bi-chevron-down"></i></a>
            <ul>
              <li><a href="/vowel">元音字母</a></li>
<!--              <li class="dropdown"><a href="#"><span>待开发</span> <i class="bi bi-chevron-right"></i></a>-->
<!--                <ul>-->
<!--                  <li><a href="#">待拓展</a></li>-->
<!--                  <li><a href="#">待拓展</a></li>-->
<!--                  <li><a href="#">待拓展</a></li>-->
<!--                  <li><a href="#">待拓展</a></li>-->
<!--                  <li><a href="#">待拓展</a></li>-->
<!--                </ul>-->
<!--              </li>-->
              <li><a href="/name">名字全称</a></li>
              <li><a href="/bmi">BMI计算器</a></li>
              <li><a href="/shop_home">购物车</a></li>
            </ul>
          </li>
          <li><a class="nav-link scrollto" href="#contact">欢迎{{ user_name }}</a></li>
        </ul>
        <i class="bi bi-list mobile-nav-toggle"></i>
      </nav><!-- .navbar -->

    </div>
  </header><!-- End Header -->

  <!-- ======= Hero Section ======= -->

  <section id="hero" class="d-flex align-items-center">
  	<div class="container position-relative" data-aos="fade-up" data-aos-delay="100">
	  <div class="row justify-content-center">
		  <div class="col-xl-7 col-lg-9 text-center">
		 	 <h1>商品列表</h1>
           		 <div class="mycar">
                     <button class="btn btn-link"><h4><strong><a href="/shopping_cart" style="color: darkred;">我的购物车</a></strong></h4></button>
                     <h6>购物车现有商品：<b><i id="ccount" style="color: dodgerblue"></i></b></h6>
           		 </div>
		  </div>
	  </div>
		<div class="row icon-boxes">
			<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0" data-aos="zoom-in" data-aos-delay="200" >
                <div class="icon-box text-center">
                    <div class="list">
                    <dl pid="1001">
                        <dt>
                            <img class="goods-img" src="../static/img/goods/wenhuashiyi.jpg"/>
                        </dt>
                        <dd><h2><b>文化失忆:写在时间的边缘</b></h2></dd>
                        <dd>作者：【澳】克莱夫·詹姆斯</dd>
                        <dd>￥<span class="goods-money">138</span></dd>
                        <dd>
                            <button class="btn btn-primary btn-buy">添加购物车</button>
                        </dd>
                    </dl>
                        </div>
				</div>
			</div>
			<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0" data-aos="zoom-in" data-aos-delay="200" >
          		<div class="icon-box text-center">
                    <div class="list">
                    <dl pid="1002">
                        <dt>
                            <img class="goods-img" src="../static/img/goods/hfzsldxskz.jpg"/>
                        </dt>
                        <dd><h2><b>海风中失落的血色馈赠</b></h2></dd>
                        <dd>作者：【加】阿利斯泰尔·麦克劳德</dd>
                        <dd>￥<span class="goods-money">49</span></dd>
                        <dd>
                            <button class="btn btn-primary btn-buy">添加购物车</button>
                        </dd>
                    </dl>
                    </div>
				</div>
			</div>
			<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0" data-aos="zoom-in" data-aos-delay="200" >
          		<div class="icon-box text-center">
                    <div class="list">
                    <dl pid="1003">
                        <dt>
                            <img class="goods-img" src="../static/img/goods/dnedlty.jpg"/>
                        </dt>
                        <dd><h2><b>当鸟儿带来太阳</b></h2></dd>
                        <dd>作者：【加】阿利斯泰尔·麦克劳德</dd>
                        <dd>￥<span class="goods-money">59</span></dd>
                        <dd>
                            <button class="btn btn-primary btn-buy">添加购物车</button>
                        </dd>
                    </dl>
                    </div>
				</div>
			</div>
			<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0" data-aos="zoom-in" data-aos-delay="200" >
          		<div class="icon-box text-center">
                    <div class="list">
                    <dl pid="1004">
                    <dt>
                        <img class="goods-img" src="../static/img/goods/renshengzsl.jpg"/>
                    </dt>
                    <dd><h2><b>人生哲思录（全新修订版）</b></h2></dd>
                    <dd>作者：周国平</dd>
                    <dd>￥<span class="goods-money">88</span></dd>
                    <dd>
                        <button class="btn btn-primary btn-buy">添加购物车</button>
                    </dd>
                    </dl>
                    </div>
				</div>
			</div>
        </div>
            <div class="row icon-boxes">
              <div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0" data-aos="zoom-in" data-aos-delay="200" >
          		<div class="icon-box text-center">
                    <div class="list">
                    <dl pid="1005">
                        <dt>
                            <img class="goods-img" src="../static/img/goods/yanhuomanjuan.jpg"/>
                        </dt>
                        <dd><h2><b>烟火漫卷</b></h2></dd>
                        <dd>作者：迟子建</dd>
                        <dd>￥<span class="goods-money">45</span></dd>
                        <dd>
                            <button class="btn btn-primary btn-buy">添加购物车</button>
                        </dd>
                    </dl>
                    </div>
                </div>
              </div>
              <div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0" data-aos="zoom-in" data-aos-delay="100" >
                  <div class="icon-box text-center">
                      <div class="list">
                    <dl pid="1006">
                        <dt>
                            <img class="goods-img" src="../static/img/goods/wanxiao.jpg"/>
                        </dt>
                        <dd><h2><b>玩笑</b></h2></dd>
                        <dd>作者：【法】米兰·昆德拉</dd>
                        <dd>￥<span class="goods-money">56</span></dd>
                        <dd>
                            <button class="btn btn-primary btn-buy">添加购物车</button>
                        </dd>
                    </dl>
                      </div>
                </div>
              </div>
              <div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0" data-aos="zoom-in" data-aos-delay="100" >
          		<div class="icon-box text-center">
                    <div class="list">
                    <dl pid="1007">
                        <dt>
                            <img class="goods-img" src="../static/img/goods/niezi.jpg"/>
                        </dt>
                        <dd><h2><b>孽子</b></h2></dd>
                        <dd>作者：白先勇</dd>
                        <dd>￥<span class="goods-money">69</span></dd>
                        <dd>
                            <button class="btn btn-primary btn-buy">添加购物车</button>
                        </dd>
                    </dl>
                    </div>
                </div>
              </div>
              <div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0" data-aos="zoom-in" data-aos-delay="100" >
          		<div class="icon-box text-center">
                    <div class="list">
                    <dl pid="1008">
                        <dt>
                            <img class="goods-img" src="../static/img/goods/4321.jpg"/>
                        </dt>
                        <dd><h2><b>4321</b></h2></dd>
                        <dd>作者：【美】保罗·奥斯特</dd>
                        <dd>￥<span class="goods-money">148</span></dd>
                        <dd>
                            <button class="btn btn-primary btn-buy">添加购物车</button>
                        </dd>
                    </dl>
                    </div>
                </div>
              </div>
            </div>
    </div>
  </section>
        <!--
            描述：数据访问层，操作本地数据的模块
        -->
        <script type="text/javascript" src="../static/js/server.js"></script>
        <!--
            描述：本页面的js操作
        -->
        <script type="text/javascript" src="../static/js/goods_list.js"></script>

<!-- End Hero -->


  <!-- ======= Footer ======= -->
  <footer id="footer">

    <div class="footer-top">
      <div class="container">
        <div class="row">

          <div class="col-lg-3 col-md-6 footer-contact">
            <h3>PythonWorks</h3>
            <p>
              Hot Spring Avenue <br>
              Guangzhou, Conghua zone<br>
              People's Republic of China <br><br>
              <strong>Phone:</strong>尽量邮箱联系哦~看下面<br>
              <strong>Email:</strong> <a href="mailto:kaijun__o_o@outlook.com">  kaijun__o_o@outlook.com</a>
            </p>
          </div>

          <div class="col-lg-2 col-md-6 footer-links">
            <h4>Useful Links</h4>
            <ul>
              <li><i class="bx bx-chevron-right"></i> <a href="https://www.cnblogs.com/xuzhichao">Teacher Xu's blogs</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="https://flask.net.cn/">Flask官网</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="https://docs.python.org/zh-cn/3/tutorial/index.html">Python官方教程</a></li>
            </ul>
          </div>

          <div class="col-lg-3 col-md-6 footer-links">
            <h4>Our Services</h4>
            <ul>
              <li><i class="bx bx-chevron-right"></i> <a href="/vowel">元音字母词频统计</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="/name">名字全称应用</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="/bmi">BMI计算器</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="/shop_home">购物车</a></li>
            </ul>
          </div>

          <div class="col-lg-4 col-md-6 footer-newsletter">
            <h4>Join Our Newsletter</h4>
            <p>想加入我们获取最新咨询嘛？输入你的邮箱把！（其实真的不会给你发的）</p>
            <form action="" method="post">
              <input type="email" name="email"><input type="submit" value="Subscribe">
            </form>
          </div>

        </div>
      </div>
    </div>

    <div class="container d-md-flex py-4">

      <div class="me-md-auto text-center text-md-start">
        <div class="copyright">
          &copy; Copyright <strong><span>OnePage</span></strong>. All Rights Reserved
        </div>
        <div class="credits">
          <!-- All the links in the footer should remain intact. -->
          <!-- You can delete the links only if you purchased the pro version. -->
          <!-- Licensing information: https://bootstrapmade.com/license/ -->
          <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/onepage-multipurpose-bootstrap-template/ -->
          Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a> Decorated by <a href="">KaiJun</a>
        </div>
      </div>
      <div class="social-links text-center text-md-right pt-3 pt-md-0">
        <a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
        <a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
        <a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
        <a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>
        <a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>
      </div>
    </div>
  </footer><!-- End Footer -->

<!--  <div id="preloader"></div>-->
<!--  <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>-->

  <!-- Vendor JS Files -->
  <script src="../static/vendor/purecounter/purecounter.js"></script>
  <script src="../static/vendor/aos/aos.js"></script>
  <script src="../static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="../static/vendor/glightbox/js/glightbox.min.js"></script>
  <script src="../static/vendor/isotope-layout/isotope.pkgd.min.js"></script>
  <script src="../static/vendor/swiper/swiper-bundle.min.js"></script>
  <script src="../static/vendor/php-email-form/validate.js"></script>
<!--  <script src="../static/js/goods_list.js"></script>-->

  <!-- Template Main JS File -->
  <script src="../static/js/main.js"></script>

</body>

</html>